<template>
  <div class="guess-like">
    <div class="guess-like-title">
      <img class="mp-titer-img" src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      <span class="mp-titer">猜你喜欢</span>
    </div>
    <ul class="mp-like-list">
      <router-link class="mp-like-item border-bottom"
      tag="li"
      v-for="item of list"
      :key="item.id"
      :to="'/details/'+item.id"
      >
        <a href="#" class="mp-fulllink">
          <div class="mp-like-imgcon image-ready">
            <img :src="item.imgurl" alt="" class="mp-like-img">
          </div>
          <div class="mp-like-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png)">
            <span>{{ item.booking }}</span>
          </div>
          <div class="mp-like-info">
            <div class="mp-like-title mp-ellipsis">{{ item.place }}</div>
            <div class="mp-like-comment">
              <span class="mpf-starlevel" mp-role="star" data-score="5.0">
                <strong class="mpg-iconfont mpf-starlevel-gain" mp-role="starWidth">★★★★★</strong>
                <span class="mpg-iconfont mpf-starlevel-total">★★★★★</span>
              </span>
              <span class="kmp-comment-num"><span>{{ item.comment }}条评论</span></span>
            </div>
            <div class="mp-like-price">
              <span class="mpg-price">
                ¥<em class="mpg-price-num">{{ item.price }}</em>
              </span>起
              <span class="mp-like-address">{{ item.address }}</span>
            </div>
            <div class="mp-like-feature">
              <span>{{ item.introduce }}</span>
            </div>
          </div>
        </a>
      </router-link>
    </ul>
    <a href="#" class="mp-like-more border-top">
      查看所有产品
    </a>
  </div>
</template>

<script>
export default {
  name: 'YouLike',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .guess-like
   margin-top 0.2rem
   .guess-like-title
    padding-top 0.24rem
    padding-bottom 0.26rem
    .mp-titer-img
     display inline-block
     overflow hidden
     height 0.3rem
     width 0.3rem
     margin-left 0.2rem
     vertical-align top
    .mp-titer
     display inline-block
     margin-left .08rem
     height .44rem
     color #212121
     font-size .32rem
     line-height .44rem
.mp-like-list
 margin-left 0.24rem
 .mp-like-item
  position relative
  overflow hidden
  padding 0.2rem 0rem
  .mp-fulllink
   display block
   width 100%
   height 100%
  .mp-like-imgcon
   float left
   overflow hidden
   width 2rem
   height 2rem
   .mp-like-img
    width 100%
  .mp-like-tag
   position absolute
   top 0.2rem
   left 0rem
   width 1.02rem
   height 0.38rem
   background-size 100%
   color #fff
   font-size 0.2rem
   line-height 0.38rem
   text-indent 0.04rem
  .mp-like-info
   padding-left 0.22rem
   overflow hidden
   .mp-like-title
    margin-top .26rem
    height .44rem
    color #212121
    font-size .32rem
    line-height .44rem
   .mp-ellipsis
    overflow hidden
    width 100%
    white-space nowrap
    text-overflow ellipsis
   .mp-like-comment
    margin-top 0.14rem
    height 0.34rem
    .mpf-starlevel
     display inline-block
     position relative
     width 1.5rem
     height 0.28rem
     line-height 0.28rem
     font-size 0.28rem
     letter-spacing 0.02rem
     transform-origin 0 0
     .mpg-iconfont
      ont-family: 'mpiconfont'
      speak none
      font-style normal
      font-weight normal
      font-variant norma
      text-transform none
      line-height 1
      -webkit-font-smoothing: antialiased
      overflow hidden
      position absolute
      color #ffb436
      top 0.04rem
      left 0rem
      height 0.28rem
      .mpf-starlevel-gain
       z-index 2
       color #ffb436
      .mpf-starlevel-total
       overflow hidden
       position absolute
       top .04rem
       left 0rem
       height 0.28rem
    .kmp-comment-num
     color #616161
     font-size .24rem
     line-height .34rem
     vertical-align text-bottom
   .mp-like-price
    position: relative;
    margin-top .22rem
    color #616161
    font-size .24rem
    line-height .4rem
    .mpg-price
     color: #ff8300
     .mpg-price-num
      font-size 0.4rem
    .mp-like-address
     position absolute
     right .24rem
     bottom 0
   .mp-like-feature
    display inline-block
    margin-top .48rem
    margin-right .24rem
    background #fff9f9
    padding .04rem .1rem
    color #f55
    font-size .24rem
    line-height .34rem
    .mp-ellipsis2
     display -webkit-box
     overflow hidden
     text-overflow ellipsis
     -webkit-line-clamp 2
     -webkit-box-orient vertical
.mp-like-more
 display block
 padding  0.2rem 0rem
 color #00afc7
 font-size 0.28rem
 line-height 0.4rem
 text-align center
 margin-top -0.02rem
</style>
